<template>
  <div class="page-warp">
    <div class="page-title">
      <el-icon>
        <HomeFilled/>
      </el-icon>
      定制开发样例-字典管理
    </div>
    <div class="page-header">
      <vxe-form
          :data="sgUtil.myData.formData"
          :rules="sgUtil.myData.formRule"
          @submit="sgUtil.search()"
      >
        <vxe-form-item title="代码" field="dm" :item-render="{}" span="8">
          <template #default="{ data,field }">
            <vxe-input
                v-model="data[field]"
                clearable
            ></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="字典类别" field="zdlb" :item-render="{}" span="8">
          <template #default="{ data,field }">
            <my-down-list
                v-model="data[field]"
                zdlb="SYS_COMMON_ZDLB"
                clearable
            >
            </my-down-list>
          </template>
        </vxe-form-item>
        <vxe-form-item title="名称" field="mc" :item-render="{}" span="8">
          <template #default="{ data,field }">
            <vxe-input
                v-model="data[field]"
                clearable
            ></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="有效性" field="yxx"
                       :item-render="{}"
                       span="8" folding>
          <template #default="{ data,field }">
            <MySelect
                v-model="data[field]"
                zdlb="SYS_COMMON_LJPD"
                clearable
            >
            </MySelect>
          </template>
        </vxe-form-item>
        <vxe-form-item
            title="更新时间"
            field="gxsj"
            :item-render="{}"
            span="8"
            folding
        >
          <template #default="{ data,field }">
            <el-date-picker
                v-model="data[field]"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="[
                  new Date(2000, 1, 1, 0, 0, 0),
                  new Date(2000, 2, 1, 23, 59, 59)
                  ]"
                value-format="YYYYMMDDHHmmss"
            >
            </el-date-picker>
          </template>
        </vxe-form-item>

        <vxe-form-item align="right" span="24" collapse-node>
          <template #default>
            <vxe-button
                type="submit"
                status="primary"
                content="查询"
            ></vxe-button>
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
    <div class="page-main">
      <div class="custom-table">
        <vxe-toolbar>
          <template #buttons>
            <div>
              <span :class="classesGrid.pageMainHeaderTitle">数据展示</span>
              <el-button-group size="small">
                <el-button type="primary" @click="sgUtil.editOpen('新增','insert',{})">
                  新增
                </el-button>
                <el-button type="primary" @click="sgUtil.plsc()">
                  批量删除
                </el-button>
                <el-button type="primary" @click="sgUtil.dcmb()">
                  导出模板
                </el-button>
                <el-button type="primary" @click="sgUtil.sjplsc()">
                  批量上传
                </el-button>
              </el-button-group>
            </div>
          </template>
          <template #tools>
            <el-button-group>
              <el-button @click="sgUtil.dcdqysj()"> 导出当前页</el-button>
              <el-button @click="sgUtil.dcsj()"> 导出全部</el-button>
            </el-button-group>
          </template>
        </vxe-toolbar>
        <vxe-table
            :data="sgUtil.myData.gridOptions.data"
            :ref="sgUtil.xGrid"
            :class="classesGrid.grid"
            :seq-config="{
            seqMethod:(params:any)=>sgUtil.seqMethod(params),
          }"
            @sortChange="(params:any)=>sgUtil.sortChange(params)"
        >
          <vxe-column type="checkbox" width="60" align="center"></vxe-column>
          <vxe-column
              type="seq"
              title="序号"
              width="60"
              align="center"
          ></vxe-column>
          <vxe-column
              field="dm"
              title="代码"
              align="center"
          ></vxe-column>
          <vxe-column
              field="px"
              title="排序"
              width="80"
              align="center"
              sortable
          ></vxe-column>
          <vxe-column
              field="zdlb"
              title="字典类别"
              align="center"
              formatter="formatterZd"
          ></vxe-column>
          <vxe-column
              field="mc"
              title="名称"
              align="center"
          ></vxe-column>
          <vxe-column
              field="gxsj"
              title="更新时间"
              width="200"
              align="center"
              sortable
              formatter="formatDate"
          ></vxe-column>
          <vxe-column
              field="sjdj"
              title="数据等级"
              width="80"
              align="center"
              formatter="formatterZd"
          ></vxe-column>
          <vxe-column title="操作" fixed="right" width="120" align="center">
            <template #default="{ row }">
              <vxe-button
                  type="text"
                  status="primary"
                  transfer
                  content="编辑"
                  @click="sgUtil.editOpen('编辑','update',row)"
              ></vxe-button>
              <vxe-button
                  type="text"
                  status="primary"
                  transfer
                  content="删除"
                  @click="sgUtil.plsc(row)"
              ></vxe-button>
              <vxe-button
                  type="text"
                  status="primary"
                  transfer
                  content="详情"
                  @click="sgUtil.editOpen('详情','detail',row)"
              ></vxe-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager
            v-model:current-page="sgUtil.myData.gridOptions.pagerConfig.currentPage"
            v-model:page-size="sgUtil.myData.gridOptions.pagerConfig.pageSize"
            :total="sgUtil.myData.gridOptions.pagerConfig.total"
            @page-change="(params:any)=>sgUtil.pageChange(params)"
        >
        </vxe-pager>
      </div>
    </div>
    <vxe-modal
        v-model="sgUtil.myData.showEdit"
        :title="sgUtil.myData.editTitle"
        width="80%"
        height="80%"
        resize
        destroy-on-close
    >
      <edit :obj="sgUtil.myData.obj" :edit-mode="sgUtil.myData.editMode"
            :sg-util="sgUtil" @close="(params:any)=>sgUtil.editClose(params)"></edit>
    </vxe-modal>
    <vxe-modal destroy-on-close v-model="sgUtil.myData.tcckShow" v-bind="sgUtil.myData.tcckProps"
               show-zoom resize>
      <MyForm :ref="sgUtil.xUpdate" @close="sgUtil.updateClose()"></MyForm>
    </vxe-modal>
  </div>
</template>
<script lang="ts" setup>
import classesGrid from "@/components/MySelectGrid/index.module.scss";
import SelectGridUtil from "@/utils/SelectGridUtil";
import MyForm from "@/components/MyForm";
import Edit from "./edit.vue";
import MyDownList from "@/components/MyDownList";
import MySelect from "@/components/MySelect";

const sgUtil = new SelectGridUtil({
  dxjcxx: {
    sjdx: {
      dxdm: 'SYS_SJGL_TYZD_DEMO'
    }
  },
  //设置查询默认值
  formData:{
    yxx:"1"
  }
})
</script>